<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-tag type="danger">{{ cinema.cityName }} / {{ cinema.name }} / {{cinema.address}}</el-tag>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="showCinemaHall">添加影厅</el-button>
        </el-col>
      </el-row>
      <el-table :data="hallList" border stripe>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="影厅名称" prop="hallName"></el-table-column>
        <el-table-column label="折扣率" prop="rate"></el-table-column>
        <el-table-column label="一口价" prop="fixedPrice"></el-table-column>
        <el-table-column label="添加时间" prop="addTime"></el-table-column>
        <el-table-column label="修改时间" prop="modifyTime"></el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteCinemaHall(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="添加影厅" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <el-form :model="addForm"  ref="addFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="影厅关键字" prop="hallName">
          <el-input v-model="addForm.hallName" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="折扣率" prop="rate">
          <el-input v-model="addForm.rate" style="width: 90px"></el-input>%，输入90表示按9折的价格卖给用户
        </el-form-item>
        <el-form-item label="一口价" prop="rate">
          <el-input v-model="addForm.fixedPrice" style="width: 90px"></el-input>一口价的优先级高于折扣率
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addHall">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改影厅" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm" ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="影厅关键字" prop="hallName">
          <el-input v-model="editForm.hallName" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="折扣率" prop="rate">
          <el-input v-model="editForm.rate" style="width: 90px"></el-input>%，输入90表示按9折的价格卖给用户
        </el-form-item>
        <el-form-item label="一口价" prop="rate">
          <el-input v-model="editForm.fixedPrice" style="width: 90px"></el-input>一口价的优先级高于折扣率
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editHall">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/Movie.js'
import Util from '@/libs/utils'
export default {
  data() {
    return {
      queryInfo: {
        'cinemaId':''
      },
      hallInfo: {
        'cinemaId':'',
        'hallName':'',
        'rate':'',
      },
      cinema:{

      },
      hallList: [],
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        hallName: '',
        rate: '',
        cinemaId:''
      },
      editForm: {
        hallName: '',
        rate: ''
      },
    }
  },
  created() {
    this.queryInfo.cinemaId = this.$route.query.cinemaId;
    this.hallInfo.cinemaId = this.$route.query.cinemaId;
    this.addForm.cinemaId = this.$route.query.cinemaId;
    this.getCinema(this.hallInfo.cinemaId);
    this.getHallList()
  },
  methods: {
    showCinemaHall() {
      this.addDialogVisible = true;
    },
    addDialogClosed() {
    },
    editDialogClosed() {

    },
    async showEditDialog(id) {
      Api.getCinemaHall({'id':id}).then(res => {
        if (res.success) {
          this.editForm = res.data
          this.editDialogVisible = true
        } else {
          return this.$message.error('查询失败')
        }
      })
    },
    getCinema(id) {
      Api.getCinema({'id':id}).then(res => {
        if (res.success) {
          this.cinema = res.data;
        } else {
          return this.$message.error('查询失败')
        }
      })
    },
    getHallList() {
        Api.getCinemaHallList(this.queryInfo).then(res => {
            if (res.success) {
                this.hallList = res.data;
            } else {
                return this.$message.error('获取数据失败')
            }
        })
    },
    addHall() {
      Api.saveCinemaHall(this.addForm).then(res => {
        if (res.success) {
          this.addDialogVisible = false
          this.getHallList()
          this.$message.success('添加成功')
        } else {
          return this.$message.error('添加失败: ' + res.msg)
        }
      })
    },
    editHall() {
      Api.saveCinemaHall(this.editForm).then(res => {
        if (res.success) {
          this.editDialogVisible = false
          this.getHallList()
          this.$message.success('修改成功！')
        } else {
          return this.$message.error('修改失败: ' + res.msg)
        }
      })
    },
    deleteCinemaHall(id) {
      this.$confirm('确认删除吗？')
          .then(_ => {
            Api.deleteCinemaHall({'id':id}).then(res => {
              if (res.success) {
                this.getHallList();
              } else {
                return this.$message.error('获取数据失败')
              }
            })
          }).catch(_ => {});
    }
  }
}
</script>

<style lang="less" scoped>
</style>
